<template>
	<view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="200" style="width: 750rpx;height: 250rpx;">
			<swiper-item>
				<image src="/static/demo/banner/1.jpg" mode="aspectFill" class="swiper-image"></image>
			</swiper-item>
			<swiper-item>
				<image src="/static/demo/banner/2.jpg" mode="aspectFill" class="swiper-image"></image>
			</swiper-item>
		</swiper>
		
		<!-- 列表 -->
		<view class="flex flex-wrap">
			<view class="list-item" v-for="(item, index) in list" :key="index" @click="openLive(item.id)">
				
				<image :src="item.cover || defaultCover" mode="aspectFill" class="list-image"></image>
				
				<view class="rounded-circle px-2 flex align-center list-money">
					<text class="iconfont icon-bizhongguanli text-warning mr-1"></text>
					<text class="text-white font-sm mt-1">{{item.coin}}</text>
				</view>
				
				<view class="rounded-circle px-2 flex align-center list-popularity">
					<text class="font-sm text-white">人气：</text>
					<text class="text-white font-sm mt-1">{{item.look_count}}</text>
				</view>
				
				<view class="rounded-circle flex align-center list-title">
					<text class="text-white font">{{item.title}}</text>
				</view>
				
				<view class="rounded-circle flex align-center list-onlive">
					<text class="rounded-circle mr-1 list-onlive-icon" :class="'bg-' + (item.status === 1 ? 'success' : 'danger')"></text>
					<text class="text-white font-sm">{{item.status | formatStatus}}</text>
				</view>
				
			</view>
		</view>
		
		<uni-load-more :status="moreStatus"></uni-load-more>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: 1,
				list: [],
				defaultCover: "https://z3.ax1x.com/2021/10/18/5akoJe.png",
				moreStatus: "more"
			}
		},
		onLoad() {
			this.getData()
		},
		onPullDownRefresh() {
			this.page = 1
			this.getData().then(res => {
				uni.showToast({
					title: '刷新成功'
				});
				uni.stopPullDownRefresh()
			}).catch(err => {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			if (this.moreStatus == 'noMore') {
				return
			}
			this.moreStatus = "loading"
			this.page = this.page + 1
			this.getData()
		},
		filters: {
			formatStatus(value) {
				let status = {
					0 : "未开始",
					1 : "直播中",
					2 : "暂停中",
					3 : "已结束",
				}
				return status[value]
			}
		},
		methods: {
			openLive(id) {
				uni.navigateTo({
					url: '../live/live?id='+id
				});
			},
			getData() {
				return this.$H.get('/live/list/'+this.page).then(res => {
					if (res.length != 0) {
						this.list.push(...res)
						this.moreStatus = "more"
					} else {
						this.page = this.page > 1 ? this.page - 1 : this.page
						this.moreStatus = "noMore"
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.swiper-image {
		width: 750rpx;
		height: 250rpx;
	}
	
	.list-item {
		width: 375rpx;
		height: 375rpx;
		padding: 5rpx;
		box-sizing: border-box;
		position: relative;
		
		.list-image {
			width: 365rpx;
			height: 365rpx;
		}
		
		.list-money {
			position: absolute;
			left: 15rpx;
			top: 15rpx;
			background-color: rgba(0,0,0,0.4);
		}
		
		.list-popularity {
			position: absolute;
			right: 15rpx;
			top: 15rpx;
			background-color: rgba(0,0,0,0.4);
		}
		
		.list-title {
			position: absolute;
			left: 15rpx;
			bottom: 15rpx;
		}
		
		.list-onlive {
			position: absolute;
			right: 15rpx;
			bottom: 15rpx;
			background-color: rgba(0,0,0,0.4);
			
			.list-onlive-icon {
				width: 20rpx;
				height: 20rpx;
			}
		}
	}
</style>
